<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>国信安-教务系统</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<style>
			/* 移动端 */
			
			@media screen and (max-width: 768px) {
				.layui-layout-admin .layui-layout-left,
				.layui-layout-admin .layui-body,
				.layui-layout-admin .layui-footer {
					left: 0;
				}
				.layui-layout-admin .layui-side {
					left: -300px;
				}
			}
			/*.layui-table td{
   	 height: 100px;
    }*/
			
			.layui-table td img {
				width: 100%;
				height: 100%;
			}
			
			.layui-input {
				width: 175px;
			}
			
			.layui-unselect {
				width: 200px;
			}
		</style>

	</head>

	<body>

		<!--   search  多条件查询  表单-->
		<div class="layui-form" id="search-studentForm" lay-filter="search-studentForm">
			<!--或者<form class="layui-form" action=""></form> -->
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">学生学号:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="text" class="layui-input" name="stuId">
					</div>
				</div>
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">姓名:</label>
					<div class="layui-input-inline" style="width: 150px">
						<!--内层-->
						<input type="text" class="layui-input" name="stuName">
					</div>
				</div>
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">手机号:</label>
					<div class="layui-input-inline" style="width: 150px">
						<!--内层-->
						<input type="tel" class="layui-input" name="stuPhone">
					</div>
				</div>
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">身份证:</label>
					<div class="layui-input-inline" style="width: 150px">
						<!--内层-->
						<input type="text" class="layui-input" name="stuIdCard">
					</div>
				</div>
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">班级:</label>
					<div class="layui-input-inline" style="width: 150px">
						<!--内层-->
						<select  class="listClasses" name="claId" lay-search>
							<option value="">---请选择---</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label" style="margin-left: -53px;">状态:</label>
					<div class="layui-input-inline">
						<!--内层-->
						<select  name="stuState">
							<option value="">---请选择---</option>
							<option value="0">在籍</option>
							<option value="1">毕业</option>
							<option value="2">休学</option>
							<option value="3">退学</option>
							<option value="4">开除</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<button type="submit" id="search-submit" class="layui-btn" lay-submit="search-submit" lay-filter="search-filter">
					      	<i class="layui-icon layui-icon-search"></i>查询</button>
					</div>
				</div>
			</div>
		</div>
		<!--批量删除 添加按钮-->
		<div class="student-btns">
				<div class="layui-btn-container">
					<div class="layui-btn-group">
			<button type="button" class="layui-btn layui-btn-student" data-type="batchdel"><i class="layui-icon layui-icon-delete"></i>删除</button>
			<button type="button" class="layui-btn layui-btn-student" data-type="add"><i class="layui-icon layui-icon-addition"></i>添加</button>
			<button id="uploadStudentExcel" type="button" class="layui-btn layui-btn-student" ><i class="layui-icon layui-icon-upload"></i>批量上传</button>
			<a href="downLoadStudentModel?filePath=fileModel/student.xls"><button type="button" class="layui-btn layui-btn-student" ><i class="layui-icon layui-icon-layim-download"></i>上传模板</button></a>
			<button type="button" class="layui-btn layui-btn-student" data-type="downLoadData"><i class="layui-icon layui-icon-download-circle"></i>导出当前查询的数据</button>
			</div>
		</div>
	  </div>
	<!--表格数据-->
		<table id="test-student" lay-filter="filter-student"></table>
		<!--表格内置工具栏-->
		<script type="text/html" id="table-rows-student">
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
		</script>

		<!-- 编辑的表单  添加  修改-->
		<div class="layui-form" id="studentForm" lay-filter="edit-studentForm" style="display: none;">
			<!--或者<form class="layui-form" action=""></form> -->
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">编号:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="text" class="layui-input" name="stuId" readonly="">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">姓名:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="text" class="layui-input" name="stuName">
					</div>
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">性别:</label>
					<div class="layui-input-block">
						<input type="radio" name="stuSex" value="0" title="男" checked="">
						<input type="radio" name="stuSex" value="1" title="女">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">手机号:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="text"  pattern="^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$" class="layui-input" id="phone" name="stuPhone">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">出生日期:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="date" class="layui-input" id="stuBirthday" name="stuBirthday">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">身份证:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="text" class="layui-input" id="stuIdCard" name="stuIdCard">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">班级：</label>
					<div class="layui-input-inline" style="width: 100px;">
						<select  class="listClasses" name="claId" lay-search>
							<option>---请选择---</option>
						</select>
					</div>
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">状态：</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<select id="stuState" name="stuState">
							<option>---请选择---</option>
							<option value="0">在籍</option>
							<option value="1">毕业</option>
							<option value="2">休学</option>
							<option value="3">退学</option>
							<option value="4">开除</option>
						</select>
					</div>
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit="studentForm-submit" lay-filter="studentForm-filter">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</div>
		<!--div  隐藏  点击编辑时打开-->
		<!--html   点击打开新的页面  然后进行编辑-->
	</body>
	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
	<script>
		layui.use(['element', 'table', 'layer', 'form','upload'], function() {
			var element = layui.element,
				form = layui.form,
				layer = layui.layer,
				table = layui.table,
					upload = layui.upload;
			//班级信息ajax请求  然后渲染 select下拉框   search查询  和insertAndUpdate表单
			$.getJSON("classesSelect",function(result){
					if(result.code==0){
						$.each(result.data,function(index,obj){
							$(".listClasses").append("<option value='"+obj.claId+"'>"+obj.claName+"</option>")
						});
						//刷新表单
						form.render('select');
					}
			});
			////////////////////////////////////////////////////////////////////////
			//表格加载数据:  JSON
			//表格的加载  ：ajax请求，然后渲染表格
			table.render({
				elem: '#test-student' //那个table  id的值
					,
				url: 'studentSelect' //  url后面 servlet | json
					,
				cols: [
					[ //解析json数据 表头
						{
							type: 'checkbox',
							fixed: 'left',
							width: 50,
						}, {
							field: 'stuId',
							width: 80,
							title: '学生学号',
							sort: true
						}, {
							field: 'stuName',
							title: '学生姓名',
							minWidth: 80
						}, {
							field: "stuSex",
							title: '性别',
							minWidth: 80,
						templet:function(d){
								return  d.stuSex==0?"男":"女";
						}
					},{
						field: 'stuPhone',
						title: '电话',
						width: 150
					}, {
							field: 'stuBirthday',
							title: '出生日期',
							width: 150,
						templet: '<div>{{layui.util.toDateString(d.stuBirthday,\'yyyy-MM-dd HH:mm:ss\')}}</div>'

					},{
							field: 'stuIdCard',
							title: '身份证',
							width: 150
						}, {
							field: 'claName',
							title: '班级名称',
							width: 150,templet:function(d){
								console.log(d.claName)
							return  d.claName!=null?d.claName:"未分班";
						}
						}, {
							field: 'stuUpdateTime',
							title: '更新时间',
							width: 150,
						templet: '<div>{{layui.util.toDateString(d.stuUpdateTime,\'yyyy-MM-dd HH:mm:ss\')}}</div>'

					},{
							field: 'stuState',
							title: '状态',
							width: 150,
						templet:function(d){
							switch (d.stuState) {
								case 0:
									return "在籍";
								case 1:
									return "毕业";
								case 2:
									return "休学";
								case 3:
									return "退学";
								case 4:
									return "开除";
							}
						}
						},{
							title: '操作',
							width: 150,
							align: 'center',
							fixed: 'right',
							toolbar: '#table-rows-student'
						}
					]
				],
				page: true //是否开启分页
					,
				limit: 10 //每页显示的条数
					,
				limits: [5, 10, 20, 50, 100] // 选择分页的显示条数
					,
				height: 500,
				text: '对不起，加载出现异常,请刷新试试。'
			});
			/*表格工具的事件*/
			table.on('tool(filter-student)', function(obj) {
				console.log(obj); //当前对象
				console.log(obj.data); //当前行的数据
				//获取当前行的数据   rows数据
				var data = obj.data;
				console.log(obj.event); //当前点击事件的名称
				if(obj.event == "del") {
					layer.confirm('真的删除这行数据么？', function(index) {
						//ajax请求后台servlet删除成功后
						$.getJSON("studentDelById",{id:data.stuId},function (result) {
							alert(result.msg);
							if(result.code==0){
								obj.del(); //在表格内移除
								layer.close(index); //关闭提示窗口
							}
						});
						//成功之后再更新表格 table.reload();
					});
				} else {
					console.log("编辑  打开一个新窗口 显示在当前窗口的前面");
					//data 放入form表单中  20字段
					//一个字段一个字段赋值
					form.val("edit-studentForm", {
						"stuId":data.stuId,
						"stuName":data.stuName,
						"stuSex":data.stuSex,
						"stuPhone":data.stuPhone,
						"stuIdCard":data.stuIdCard,
						"stuBirthday":data.stuBirthday,
						"claId":data.claId,
						"stuState":data.stuState
					});
					console.log(data);
					$("#display_id").css("display","block");
					//  form 表单的name  名字要与 表格中的 field一直  名字要跟JSON一致
					
					$("#studentForm .layui-form-item:first").css("visibility", "inherit");
					layer.open({
						type: 1,
						title: '修改学生信息',
						content: $('#studentForm'),
						maxmin: true,
						area: ['500px', '600px'],
						resize: false,
						yes: function(index, layero) {
							$("#studentForm-submit").trigger('click'); //提交绑定点击事件
						},
						cancel: function(index, layero) {
							//把表单的display  设置成none
							$('#studentForm').css("display", "none");
							return true;
						}
					});
				}
			});

			//添加,批量删除按钮事件
			var active = {
				batchdel: function() {
					//所以表格中被选中的 数据
					console.log("batchdel");
					//[1,2,3,4,5]
					var checkData = table.checkStatus('test-student').data; //idTest 即为基础参数 id 对应的值
					if(checkData.length > 1) {//12345
						//   所以 id  提取
						var arrId = "";
						$.each(checkData, function() {
							arrId += this.stuId + ",";
						});
						//arrId=1,2,3,4,5,
						arrId=arrId.substr(0, arrId.length - 1);
						console.log(arrId) //获取选中行的数据
						//arrId=1,2,3,4,5
						//请求后端删除数据  然后刷新表格
						$.getJSON("studentBatchDelById",{arrId:arrId},function(result){
							layer.alert(result.msg);
							 if(result.code==0){
								 $("#search-submit").trigger('click');//触发筛选按钮的事件,那么就会重新查询
							 }
						});
					} else {
						layer.alert('请选择至少两条数据', {icon: 2});
					}

				},
				add: function() {
					console.log("add");
					//清空 form中数据  防止上一次 输入的值还在里面
					// form.render(null, 'edit-studentForm');
					form.val("edit-studentForm", {
						"stuId": "",
						"stuName": "",
						"stuSex":"",
						"stuPhone":"",
						"stuBirthday":"",
						"stuIdCard":"",
						"claId":"",
						"stuState":""
					});
					console.log($("#studentForm .layui-form-item:first").html());
					$("#studentForm .layui-form-item:first").css("visibility", "hidden");
					layer.open({
						type: 1,
						title: '添加学生信息',
						content: $('#studentForm'),
						maxmin: true,
						area: ['500px', '600px'],
						resize: false,
						yes: function(index, layero) {
							$("#studentForm-submit").trigger('click'); //提交绑定点击事件
						},
						cancel: function(index, layero) {
							//把表单的display  设置成none
							$('#studentForm').css("display", "none");
							return true;
						}
					});
				},
				downLoadData: function() {//下载
					//获取表单中的数据
					var  data=form.val("search-studentForm")
					//请求后端筛选查询  然后把数据装入Excel中进行导出
					location.href="downLoadStudentData?stuId="+data.stuId+"&stuName="+data.stuName+
					"&stuPhone="+data.stuPhone+"&stuIdCard="+data.stuIdCard+
					"&claId="+data.claId+"&stuState="+data.stuState;

				}
			};

			//批量删除 添加按钮 解析data-type的值,绑定对应的事件
			$('.layui-btn-student').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			//多条件查询 form 表单的submit 绑定提交事件
			form.on('submit(search-filter)', function(data) {
				console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				var field = data.field;
				//给表单然后进行 table 筛选
				table.reload('test-student', {
					url: 'studentSelect' //异步数据接口
					,where: data.field //设定异步数据接口的额外参数
					//,height: 300
				});
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

			//新增修改的 form 表单的submit 绑定提交事件
			form.on('submit(studentForm-filter)', function(data) {
				console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				var field = data.field;
				if(field.stuId == "") {
					//添加  ajax
					console.log("这是添加");
					$.post("studentAdd", data.field,
                      function(result){//200  -1
						    layer.alert(result.msg);
                           if(result.code==0){
                              location.reload();//刷新页面
                           }
                      },"json");
				} else {
					//修改 ajax
					console.log("这是修改");
					 $.post("studentUpdate", data.field,
                      function(result){//200  -1
					 	 layer.alert(result.msg);
                           if(result.code==0){
								location.reload();//刷新页面
                           }
                      },"json");
				}
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

			//常规使用 - 普通图片上传
			var uploadInst = upload.render({
				elem: '#uploadStudentExcel'
				,field:"studentExcel"
				,accept:"file"//文件是普通文件
				,exts:"xls|xlsx"//指定上传文件的格式
				, url: 'uploadStudentExcel' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
				, done: function (res) {
					//如果上传失败
						return layer.msg(res.msg);
				}
			});

		});
	</script>

</html>